const form = layui.form
const layer = layui.layer
// 发请求，由于参数比较多，每次都要带上参数，所以创建一个对象
let query = {
    pagenum: 1,	    //是	int	页码值
    pagesize: 2,	//是	int	每页显示多少条数据
    cate_id: '',	//否	string	文章分类的 Id
    state: '',	    //否	string	文章的状态，可选值有：已发布、草稿
}

// ===========获取文章列表数据==================
function getArtList() {
    axios.get('/my/article/list', { params: query }).then(({ data: { data, total } }) => {
        const newStr = data.map(({ title, pub_date, state, cate_name, Id }) => {
            return `
            <tr>
                <td>${title}</td>
                <td>${cate_name}</td>
                <td>${pub_date}</td>
                <td>${state}</td>
                <td>
                  <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id='${Id}'>编辑</button>
                  <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id='${Id}'>删除</button>
                </td>
            </tr> 
            `
        }).join('')
        $('#list').html(newStr)
        renderPage(total)
    })

}
getArtList()

//============获取分类列表数据===> 填充到下拉框============
axios.get('/my/article/cates').then(({ data: { data } }) => {
    const newStr = data.map(({ Id, name }) => {
        // 下拉框选择的结果是由option value决定
        // value设置成对应的Id值
        return `
        <option value="${Id}">${name}</option>
        `
    }).join('')
    $('#cateSelect').append(newStr)
    // 调用layui中的render函数渲染
    form.render('select')
})

// ==============筛选功能===========
$('#form').on('submit', function (e) {
    // 阻止表单默认行为
    e.preventDefault()
    // 获取到表单的值，并且用新值重新渲染
    query.cate_id = $('#cateSelect').val()
    query.state = $('#stateSelect').val()
    // 筛选结束从第一页开始
    query.pagenum = 1
    getArtList()
})

// ============分页效果=============
const laypage = layui.laypage;
function renderPage(total) {
    //执行一个laypage实例
    laypage.render({
        elem: 'page-box',     //注意，这里的 test1 是 ID，不用加 # 号
        count: total,          //数据总数，从服务端得到
        limits: [1, 2, 5, 8, 10],
        limit: query.pagesize,  //每页显示多少条数据
        curr: query.pagenum,    //显示的起始页 
        layout: ['count', 'limit', 'page', 'prev', 'next', 'skip'],
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            query.pagenum = obj.curr
            // query.pagesize = obj.limit
            // getArtList()
            //首次不执行
            if (!first) {
                getArtList()
            }
        }

    })
}

// ===============删除功能=============
$('body').on('click', '.btn_delete', function () {
    const id = $(this).attr('data-id')
    layer.confirm('确定删除这篇文章吗?', { icon: 3, title: '提示' }, function (index) {
        axios.get(`/my/article/delete/${id}`).then(({ data: { status, message } }) => {
            if (status !== 0) {
                return layer.msg(message)
            }
           
            // 解决删除的bug ==> 去加载上一页的数据
            // 当这一页的删除按钮的个数为一个的时候，表示这一页数据没了，要显示上一页的数据
            if($('.btn_delete').length === 1){
                // if(query.pagenum === 1){
                //     query.pagenum = 1
                // }else{
                //     query.pagenum = query.pagenum-1
                // }
                query.pagenum = query.pagenum === 1 ? 1 : query.pagenum-1
            }
            layer.msg(message)
            layer.close(index)

            getArtList()
        })
    })
})

// =============编辑功能=================
$('body').on('click','.btn_edit',function(){
    const id = $(this).attr('data-id')
    location.href = `./art_edit.html?id=${id}`
})
